---
feature_name: Presentation Receiver API
chrome_version: 59
feature_id: 5414209298890752
---

<h3>Background</h3>

<p>
  This sample illustrates the use of
  <a href="https://w3c.github.io/presentation-api/">Presentation API</a>,
  which gives the ability to access external presentation-type displays and use
  them for presenting Web content. The <code>PresentationRequest</code> object
  is associated with a request to initiate or reconnect to a presentation made
  by a controlling browsing context and it takes in a presentation request URL
  when constructed. A presentation can be started by calling the
  <code>start()</code> method on the <code>PresentationRequest</code> object.
</p>

<p>
  <button id="start">presentationRequest.start()</button>
</p>
<p>
  <input id="message" type="text" placeholder="Enter a message..." list="fruits" >
  <datalist id="fruits">
    <option value="grapes">
    <option value="watermelon">
    <option value="melon">
    <option value="tangerine">
    <option value="lemon">
    <option value="banana">
    <option value="pineapple">
    <option value="green apple">
    <option value="apple">
    <option value="pear">
    <option value="peach">
    <option value="cherries">
    <option value="strawberry">
  </datalist>
  <button id="sendMessage">presentationConnection.send(message)</button>
</p>
<p>
  <button id="close">presentationConnection.close()</button>
  <button id="terminate">presentationConnection.terminate()</button>
</p>
<p>
  <input id="presentationId" type="text" placeholder="Enter a presentation ID...">
  <button id="reconnect">presentationRequest.reconnect(presentationId)</button>
</p>
{% include output_helper.html initial_output_content=initial_output_content %}

<script>
  log = ChromeSamples.log;
</script>

{% capture js %}
const presentationRequest = new PresentationRequest(['receiver/index.html']);

// Make this presentation the default one when using the "Cast" browser menu.
navigator.presentation.defaultRequest = presentationRequest;

let presentationConnection;

document.querySelector('#start').addEventListener('click', function() {
  log('Starting presentation request...');
  presentationRequest.start()
  .then(connection => {
    log('> Connected to ' + connection.url + ', id: ' + connection.id);
  })
  .catch(error => {
    log('> ' + error.name + ': ' + error.message);
  });
});

presentationRequest.addEventListener('connectionavailable', function(event) {
  presentationConnection = event.connection;
  presentationConnection.addEventListener('close', function() {
    log('> Connection closed.');
  });
  presentationConnection.addEventListener('terminate', function() {
    log('> Connection terminated.');
  });
  presentationConnection.addEventListener('message', function(event) {
    log('> ' + event.data);
  });
});

document.querySelector('#sendMessage').addEventListener('click', function() {
  const message = document.querySelector('#message').value.trim();
  const lang = document.body.lang || 'en-US';

  log('Sending "' + message + '"...');
  presentationConnection.send(JSON.stringify({message, lang}));
});

document.querySelector('#close').addEventListener('click', function() {
  log('Closing connection...');
  presentationConnection.close();
});

document.querySelector('#terminate').addEventListener('click', function() {
  log('Terminating connection...');
  presentationConnection.terminate();
});

document.querySelector('#reconnect').addEventListener('click', () => {
  const presentationId = document.querySelector('#presentationId').value.trim();

  presentationRequest.reconnect(presentationId)
  .then(connection => {
    log('Reconnected to ' + connection.id);
  })
  .catch(error => {
    log('Presentation.reconnect() error, ' + error.name + ': ' + error.message);
  });
});

/* Availability monitoring */

presentationRequest.getAvailability()
.then(availability => {
  log('Available presentation displays: ' + availability.value);
  availability.addEventListener('change', function() {
    log('> Available presentation displays: ' + availability.value);
  });
})
.catch(error => {
  log('Presentation availability not supported, ' + error.name + ': ' +
      error.message);
});

{% endcapture %}
{% include js_snippet.html title="Controller" js=js %}

{% include js_snippet.html displayonly=true title="Receiver" filename='receiver/receiver.js' %}

